<template>
    <div class="container">
        <!--区域加盟和单店加盟-->
        <div class="two-join">
            <!--区域加盟-->
            <div class="region">
                <p>区域加盟</p>
                <p>选择一定区域，成为蜀帅区域总代理商。可获得直营店经营利润；发展加盟店，可赚取加盟费。</p>
            </div>
            <!--单店加盟-->
            <div class="singlestore">
                <p>单店加盟</p>
                <p>选择好的地段，开蜀帅加盟店，赚取经营利润</p>
            </div>
        </div>

        <!--投资预算-->
        <div class="budget">
            <p class="budget-title">投资预算</p>
            <!--预算具体区域-->
            <div class="budget-content">
                <dl>
                    <dt>经营面积</dt>
                    <dd>30 - 50 平方米</dd>

                    <hr>

                    <dt>品种</dt>
                    <dd>小吃、快餐、饮料</dd>

                    <hr>

                    <dt>产品比例</dt>
                    <dd>外卖80%、打包9%、食堂1%</dd>

                    <hr>

                    <dt>加盟费</dt>
                    <dd>3.98 万元</dd>

                    <hr>

                    <dt>保证金</dt>
                    <dd>2 万元</dd>

                    <hr>

                    <dt>合同期限</dt>
                    <dd>3 年</dd>

                    <hr>

                    <dt>培训人数</dt>
                    <dd>3人</dd>

                    <hr>

                    <dt>带店时间</dt>
                    <dd>5 天</dd>

                    <hr>

                    <p class="statement">（本材料为宣传资料，不具备法律效力，以具体各项签约合同为准）</p>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "moshi"
    }
</script>

<style lang="less">
    /*区域加盟和单店加盟*/
    .two-join {
        margin-top: 84px;
        height: 362px;
        background: url("../../assets/images/product/two-join.png") no-repeat center center;
        position: relative;
        /*区域加盟*/

        .region {
            width: 365px;
            height: 163px;
            /*background-color: #a6e1ec;*/
            position: absolute;
            left: 115px;
            top: 37px;
        }

        /*单店加盟*/

        .singlestore {
            width: 280px;
            height: 163px;
            /*background-color: #e9d764;*/
            position: absolute;
            right: 115px;
            top: 37px;

            p {
                color: #fff !important;
            }
        }

        .region,
        .singlestore {
            p {
                &:nth-of-type(1) {
                    font-size: 30px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #000000;
                    line-height: 62px;
                    text-align: center;
                }

                &:nth-of-type(2) {
                    font-size: 20px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    line-height: 40px;
                    color: #333333;
                }
            }
        }
    }

    /*投资预算*/
    .budget {
        height: 626px;
        background: url("../../assets/images/product/budget_bac.png") no-repeat center center;
        padding-top: 60px;
        padding-left: 160px;
        /*background-size: cover;*/

        p.budget-title {
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            margin-bottom: 59px;
        }

        /*预算具体区域*/

        .budget-content {
            width: 450px;
            height: 420px;
            /*background-color: pink;*/

            dl {
                hr {
                    border: 1px dashed #c8c8c8;
                }

                dt,
                dd {
                    font-size: 18px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 45px;
                    letter-spacing: 0px;
                    color: #333333;
                }

                dt {
                    float: left;
                }

                dd {
                    margin-left: 200px;
                }
                p.statement{
                    font-size: 14px;
                    line-height: 50px;
                    color: #333333;
                }
            }
        }
    }


</style>